<template>
  <div class="personCenter">
    <div class="personInfo">
      <p>个人中心</p>
      <p>
        <span>鲸友{{nickName}}</span>
        <!-- <span>
          总资产：
          <span style="font-size: 20px;margin-right: 0px">{{personInfoData.total}}</span>
          FIL
        </span> -->
        <span style="margin-left: 20px">昨日收益：
					<span style="font-size: 20px;margin-right: 0px"> {{yesterdayEarn}}</span>
					FIL
				</span>
        <span style="margin-left: 20px">FIL当前价格：
					<span style="font-size: 20px;margin-right: 0px"> {{currentPrice}}</span>
					USTD
				</span>
      </p>
      <div class="account">
        <div>
          <span>账户余额</span>
          <p>
            <span class="accountNum">{{personInfoData.balance}}</span>
            FIL
          </p>
        </div>
        <div>
          <span>可用余额</span>
          <a-button class="add" @click="visible1 = true,sendText2 = '获取邮箱验证码',disabled2 = false">兑换USDT</a-button>
          <p>
            <span class="accountNum">{{personInfoData.available}}</span>
            FIL
          </p>
        </div>
        <div>
          <span>锁仓账户</span>
          <p>
            <span class="accountNum">{{personInfoData.locked}}</span>
            FIL
          </p>
        </div>
        <div>
          <span>算力券</span>
          <p>
            <span class="accountNum">{{personInfoData.card}}</span>
            T
          </p>
        </div>
        <div>
          <span>USDT余额</span>
          <a-button class="add" @click="rechargeMoney" :loading="loading">充值</a-button>
          <a-button class="add" @click="visible2 = true,sendText2 = '获取邮箱验证码',disabled2 = false">提现</a-button>
          <p>
            <span class="accountNum">{{personInfoData.usdt}}</span>
            USDT
          </p>
        </div>
      </div>
      <div class="account1">
        <div class="account2">
          <div>
            <span>账户余额</span>
            <p>
              <span class="accountNum">{{personInfoData.balance}}</span>
              FIL
            </p>
          </div>
          <div>
            <span>可用余额</span>
            <a-button class="add">兑换USDT</a-button>
            <p>
              <span class="accountNum">{{personInfoData.available}}</span>
              FIL
            </p>
          </div>
          <div>
            <span>锁仓账户</span>
            <p>
              <span class="accountNum">{{personInfoData.locked}}</span>
              FIL
            </p>
          </div>
        </div>
        <div class="account2">
          <div>
            <span>算力券</span>
            <p>
              <span class="accountNum">{{personInfoData.card}}</span>
              T
            </p>
          </div>
          <div>
            <span>USDT余额</span>
            <a-button class="add" @click="rechargeMoney">充值</a-button>
            <a-button class="add" @click="visible2 = true">提现</a-button>
            <p>
              <span class="accountNum">{{personInfoData.usdt}}</span>
              USDT
            </p>
          </div>
        </div>
      </div>
    </div>
    <a-modal v-model="visible1" title="余额兑换" :footer="null">
      <a-form-model :model="form6" :label-col="{span: 4}" :wrapper-col="{span: 14}">
        <a-form-model-item label="认证邮箱">
          <span>{{currentBindEmail}}</span>
        </a-form-model-item>
        <a-form-model-item label="当前价格">
          <span>{{currentPrice}} USTD</span>
          <span style="font-size: 12px;margin-left: 10px;">(实际兑换价格以兑换时为准)</span>
        </a-form-model-item>
        <a-form-model-item label="兑换数量">
          <a-input v-model="form6.num"/>
        </a-form-model-item>
        <a-form-model-item label="邮箱验证码" prop="emailCode">
          <a-input v-model="form6.emailCode" placeholder="请输入邮箱验证码">
            <a slot="addonAfter" @click="sendEmail1('exchangeAmount')" :disabled="disabled2">
              {{sendText2}}
            </a>
          </a-input>
        </a-form-model-item>
        <a-form-model-item>
          <a-button type="primary" @click="submitDuiH" style="float: right">确定
          </a-button>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
    <a-modal v-model="visible2" title="提现" :footer="null">
      <a-form-model :model="form7" :label-col="{span: 6}" :wrapper-col="{span: 14}">
        <a-form-model-item label="认证邮箱">
          <span>{{currentBindEmail}}</span>
        </a-form-model-item>
        <a-form-model-item label="每笔扣除手续费">
          <span>5 USDT</span>
        </a-form-model-item>
        <a-form-model-item label="提现地址">
          <a-select v-model="form7.address">
            <a-select-option :value="item.id" v-for="(item,index) in data1" :key="index">
              {{item.name}}
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="提现数量">
          <a-input v-model="form7.num"/>
        </a-form-model-item>
        <a-form-model-item label="邮箱验证码" prop="emailCode">
          <a-input v-model="form7.emailCode" placeholder="请输入邮箱验证码">
            <a slot="addonAfter" @click="sendEmail1('applyExtractCash')" :disabled="disabled2">
              {{sendText2}}
            </a>
          </a-input>
        </a-form-model-item>
        <a-form-model-item>
          <a-button type="primary" @click="submitTiX" style="float: right">确定
          </a-button>
        </a-form-model-item>
      </a-form-model>
    </a-modal>

    <div class="personShow">
      <a-row :gutter="30">
        <a-col :span="6">
          <div class="left">
            <div class="menu2">
              <p class="menuTitle">钱包管理</p>
              <div class="borderLine"></div>
              <p @click="tabName = '钱包管理 / 余额账户'" :class="tabName == '钱包管理 / 余额账户' ? 'selectP' : ''">余额账户
              </p>
              <p @click="tabName = '钱包管理 / 锁仓账户'" :class="tabName == '钱包管理 / 锁仓账户' ? 'selectP' : ''">锁仓账户
              </p>
              <p @click="tabName = '钱包管理 / 资金明细'" :class="tabName == '钱包管理 / 资金明细' ? 'selectP' : ''">资金明细
              </p>
              <p @click="tabName = '钱包管理 / 订单记录'" :class="tabName == '钱包管理 / 订单记录' ? 'selectP' : ''">订单记录
              </p>
              <p @click="tabName = '钱包管理 / 提现记录'" :class="tabName == '钱包管理 / 提现记录' ? 'selectP' : ''">
                提现记录
              </p>
            </div>
            <div class="menu1">
              <p class="menuTitle">个人中心</p>
              <div class="borderLine"></div>
              <p @click="tabName = '个人中心 / 邮箱绑定'" :class="tabName == '个人中心 / 邮箱绑定' ? 'selectP' : ''">邮箱绑定
              </p>
              <p @click="tabName = '个人中心 / 实名认证'" :class="tabName == '个人中心 / 实名认证' ? 'selectP' : ''">实名认证
              </p>
              <p @click="tabName = '个人中心 / USDT提现地址'"
                 :class="tabName == '个人中心 / USDT提现地址' ? 'selectP' : ''">地址管理</p>
              <p @click="tabName = '个人中心 / 修改登录密码'" :class="tabName == '个人中心 / 修改登录密码' ? 'selectP' : ''">
                修改登录密码</p>
            </div>
            <!--            <div class="menu3">-->
            <!--              <p class="menuTitle">安全设置</p>-->
            <!--              <div class="borderLine"></div>-->
            <!--              <p @click="tabName = '安全设置 / 修改登录密码'" :class="tabName == '安全设置 / 修改登录密码' ? 'selectP' : ''">-->
            <!--                修改登录密码</p>-->
            <!--              <p @click="tabName = '安全设置 / 修改交易密码'" :class="tabName == '安全设置 / 修改交易密码' ? 'selectP' : ''">-->
            <!--                修改交易密码</p>-->
            <!--              <p @click="tabName = '安全设置 / 两步验证'" :class="tabName == '安全设置 / 两步验证' ? 'selectP' : ''">两步验证-->
            <!--              </p>-->
            <!--              <p @click="tabName = '安全设置 / 谷歌验证'" :class="tabName == '安全设置 / 谷歌验证' ? 'selectP' : ''">谷歌验证-->
            <!--              </p>-->
            <!--            </div>-->
          </div>
        </a-col>
        <a-col :span="18">
          <div class="right">
            <p class="title">{{tabName}}</p>
            <div v-if="tabName == '个人中心 / 邮箱绑定'" class="single">
              <p v-if="showEmail" style="text-align: center;font-size: 16px;padding: 40px">
                您的认证邮箱：{{currentBindEmail}}</p>
              <a-form-model :model="emailForm" :rules="rulesEmail" :label-col="{span: 4}"
                            :wrapper-col="{span: 12}" ref="emailForm" v-if="!showEmail">
                <a-form-model-item label="邮箱地址" prop="email">
                  <a-input v-model="emailForm.email"></a-input>
                </a-form-model-item>
                <a-form-model-item label="图形验证码" prop="imageCode">
                  <div style="display: flex">
                    <a-input v-model="emailForm.imageCode" placeholder="请输入图形验证码"/>
                    <img :src="imgSrcEmail" width="150" height="30" alt="" @click="refelshEmailImg">
                  </div>
                </a-form-model-item>
                <a-form-model-item label="邮箱验证码" prop="emailCode">
                  <a-input v-model="emailForm.emailCode" placeholder="请输入邮箱验证码">
                    <a slot="addonAfter" @click="sendEmail" :disabled="disabled1">
                      {{sendText1}}
                    </a>
                  </a-input>
                </a-form-model-item>
                <a-form-model-item>
                  <a-button type="primary" @click="bindEmailCode('emailForm')" style="float: right">绑定
                  </a-button>
                </a-form-model-item>
              </a-form-model>
            </div>
            <div v-if="tabName == '个人中心 / 实名认证'" class="single">
              <p style="text-align: left;font-size: 16px;padding: 40px">
                <span>
                   认证状态：{{remarkStatus}}
                </span>
                <span v-if="remark">
                  原因：
                  <span style="color:#ff0000;">{{remark}}</span>
                </span>
              </p>
              <a-form-model :model="form5" :label-col="{span: 4}" :wrapper-col="{span: 12}"
                            :rules="rules5" ref="ruleForm5"
                            v-if="remarkStatus == '您已完成实名认证！' || remarkStatus == '待认证！' ? false : true">
                <a-form-model-item label="用户姓名" prop="realName">
                  <a-input v-model="form5.realName" placeholder="请输入用户姓名"/>
                </a-form-model-item>
                <a-form-model-item label="身份证号" prop="idCard">
                  <a-input v-model="form5.idCard" placeholder="请输入身份证号码"/>
                </a-form-model-item>
                <a-form-model-item label="上传图片(正反)">
                  <div class="clearfix">
                    <a-upload action="http://20.194.170.137/miner/user/uploadFile"
                              list-type="picture-card" :headers="{Authorization:token}"
                              :file-list="fileList" @preview="handlePreview" @change="handleChange">
                      <div v-if="fileList.length < 2">
                        <a-icon type="plus"/>
                        <div class="ant-upload-text">
                          Upload
                        </div>
                      </div>
                    </a-upload>
                    <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
                      <img alt="example" style="width: 100%" :src="previewImage"/>
                    </a-modal>
                  </div>
                </a-form-model-item>
                <a-form-model-item>
                  <div style="text-align: center">
                    <a-button class="sureBtn" @click="verifiedIdCard('ruleForm5')">提交</a-button>
                  </div>
                </a-form-model-item>
              </a-form-model>
            </div>
            <div v-if="tabName == '个人中心 / USDT提现地址'" style="position: relative">
              <a-button class="add" @click="visible = true">添加</a-button>
              <a-table :columns="columns1" :data-source="data1" @change="pageChange" :rowKey="rowKey"
                       :pagination="pagination">
                <template slot="operate" slot-scope="text, record">
                  <a-button type="primary" size="small" @click="updateAddress(record)">修改</a-button>
                </template>
              </a-table>
              <a-modal v-model="visible" title="USDT提现地址(TRC)" @ok="handleOk">
                <a-form-model :model="form2" :label-col="{span: 6}" :wrapper-col="{span: 14}">
                  <a-form-model-item label="认证邮箱">
                    <span>{{currentBindEmail}}</span>
                  </a-form-model-item>
                  <a-form-model-item label="地址名称">
                    <a-input v-model="form2.name"/>
                  </a-form-model-item>
                  <a-form-model-item label="提现地址">
                    <a-input v-model="form2.address"/>
                  </a-form-model-item>
                  <a-form-model-item label="邮箱验证码" prop="emailCode">
                    <a-input v-model="form2.emailCode" placeholder="请输入邮箱验证码">
                      <a slot="addonAfter" @click="sendEmail1('accountAddressAdd')" :disabled="disabled2">
                        {{sendText2}}
                      </a>
                    </a-input>
                  </a-form-model-item>
                </a-form-model>
              </a-modal>
            </div>
            <div v-if="tabName == '个人中心 / 修改登录密码'">
              <a-form-model :model="form3" :wrapper-col="{span: 10,offset:4}" :rules="rules3"
                            ref="ruleForm3">
                <a-form-model-item label="" prop="phone">
                  <a-input v-model="form3.phone" placeholder="请输入手机号码"/>
                </a-form-model-item>
                <a-form-model-item prop="imageCode">
                  <div style="display: flex">
                    <a-input v-model="form3.imageCode" placeholder="请输入图形验证码"/>
                    <img :src="imgSrcChange" width="150" height="30" alt=""
                         @click="refelshChangeImg">
                  </div>
                </a-form-model-item>
                <a-form-model-item label="" prop="smsCode">
                  <a-input v-model="form3.smsCode" placeholder="请输入短信验证码">
                    <a slot="addonAfter" @click="getMessageNum" :disabled="disabled">
                      {{sendText}}
                    </a>
                  </a-input>
                </a-form-model-item>
                <a-form-model-item label="" prop="oldPassword">
                  <a-input v-model="form3.oldPassword" type="password" placeholder="请输入旧密码"/>
                </a-form-model-item>
                <a-form-model-item label="" prop="newPassword">
                  <a-input v-model="form3.newPassword" type="password" placeholder="请输入新密码"/>
                </a-form-model-item>
                <a-form-model-item label="" prop="sureNewPassword">
                  <a-input v-model="form3.sureNewPassword" type="password" placeholder="请再次输入新密码"/>
                </a-form-model-item>
                <a-form-model-item label="" style="text-align: center">
                  <a-button class="sureBtn" @click="changePassWord('ruleForm3')">确定</a-button>
                </a-form-model-item>
              </a-form-model>
            </div>
            <div v-if="tabName == '钱包管理 / 余额账户'" style="position: relative">
              <a-table :columns="columns2" :data-source="data2" :pagination="false" :rowKey="rowKey">
								<span slot="name" slot-scope="text"
                      style="font-size: 18px;font-weight: 700;color: #380CF4">{{text}}</span>
              </a-table>
            </div>
            <div v-if="tabName == '钱包管理 / 锁仓账户'">
              <div class="tabTitle">
                <p>累计锁仓</p>
                <div></div>
                <p>{{personInfoData.locked}}</p>
              </div>
              <a-table :columns="columns3" :data-source="data3" :pagination="false">
              </a-table>
            </div>
            <div v-if="tabName == '钱包管理 / 资金明细'">
              <a-table :columns="columns5" :data-source="data5" :rowKey="rowKey" :pagination="pagination1"
                       @change="pageChange1">
              </a-table>
            </div>
            <div v-if="tabName == '钱包管理 / 订单记录'">
              <a-table :columns="columns6" :data-source="data6" :rowKey="rowKey" :pagination="pagination2"
                       @change="pageChange2">
              </a-table>
            </div>
            <div v-if="tabName == '钱包管理 / 提现记录'">
              <a-table :columns="columns7" :data-source="data7" :pagination="pagination3"
                       @change="pageChange3" :rowKey="rowKey">
              </a-table>
            </div>

            <!--            <div v-if="tabName == '安全设置 / 修改交易密码'">-->
            <!--              <a-form-model :model="form4" :wrapper-col="{span: 10,offset:4}" :rules="rules"-->
            <!--                            ref="ruleForm">-->
            <!--                <a-form-model-item label="" prop="newPassword">-->
            <!--                  <a-input v-model="form4.newPassword" type="password" placeholder="请输入您的交易密码"/>-->
            <!--                </a-form-model-item>-->
            <!--                <a-form-model-item label="" prop="surePassWord">-->
            <!--                  <a-input v-model="form4.surePassWord" type="password" placeholder="请确认交易密码"/>-->
            <!--                </a-form-model-item>-->
            <!--                <a-form-model-item label="" prop="googleCode">-->
            <!--                  <a-input v-model="form4.googleCode" placeholder="请输入谷歌验证码"/>-->
            <!--                </a-form-model-item>-->
            <!--                <a-form-model-item label="" style="text-align: center">-->
            <!--                  <a-button class="sureBtn" @click="changeDealWord('ruleForm')">确定</a-button>-->
            <!--                </a-form-model-item>-->
            <!--              </a-form-model>-->
            <!--            </div>-->
            <!--            <div v-if="tabName == '安全设置 / 两步验证'">-->
            <!--              <p>-->
            <!--                目前 两步验证保护 状态为：-->
            <!--                <span style="color: #380CF4">{{isOpen ? '已开启' : '已关闭'}}</span>-->
            <!--                <a-switch style="margin-left: 10px" v-model="checked" checked-children="开"-->
            <!--                          un-checked-children="关" default-checked/>-->
            <!--              </p>-->
            <!--              <p>两步登录保护提供更为安全的用户登录防护。启用这一功能前，您需要首先开启手机验证码功能或密码双重验证功能。</p>-->
            <!--              <div style="text-align: center">-->
            <!--                <a-input v-model="gooleCode" placeholder="请输入谷歌验证码" class="goole-input"/>-->
            <!--                <span class="goole-input-text">亦称GA/TOTP码</span>-->
            <!--              </div>-->
            <!--              <div style="text-align: center;margin-top: 20px">-->
            <!--                <a-button class="sureBtn" @click="openCheck">确定</a-button>-->
            <!--              </div>-->
            <!--            </div>-->
            <!--            <div v-if="tabName == '安全设置 / 谷歌验证'">-->
            <!--              <p>第一步：下载安装“Google Authentication（谷歌身份验证器）”App</p>-->
            <!--              <div class="authentication" style="display: flex;margin-bottom: 20px">-->
            <!--                <div>-->
            <!--                  <p style="text-align: center">-->
            <!--                    <img src="../assets/17.png" width="50" height="50" alt="">-->
            <!--                  <p>下载 Android 版</p>-->
            <!--                </div>-->
            <!--                <div>-->
            <!--                  <p style="text-align: center">-->
            <!--                    <img src="../assets/17.png" width="50" height="50" alt="">-->
            <!--                  </p>-->
            <!--                  <p>下载 ios 版</p>-->
            <!--                </div>-->
            <!--              </div>-->
            <!--              <p>第二步：在谷歌身份验证器中，添加您的Star River账号密钥：</p>-->
            <!--              <div class="authentication" style="margin-bottom: 20px">-->
            <!--                <div class="erwei">-->
            <!--                  <img src="http://20.194.170.137/miner/pub/index/getGoogleAuthQR" width="150"-->
            <!--                       height="150" alt="">-->
            <!--                  <a-input v-model="starRiverKey" class="starRiverKey">-->
            <!--                    <a slot="addonAfter" class="copyCode" :data-clipboard-text="starRiverKey"-->
            <!--                       @click="copyStarRiver" style="color: #380CF4">-->
            <!--                      复制-->
            <!--                    </a>-->
            <!--                  </a-input>-->
            <!--                </div>-->
            <!--              </div>-->
            <!--              <p>第三步：填写谷歌验证码，完成谷歌验证绑定。</p>-->
            <!--              &lt;!&ndash;              <div class="authentication">&ndash;&gt;-->
            <!--              &lt;!&ndash;                <p>手机号：{{phone}}</p>&ndash;&gt;-->
            <!--              &lt;!&ndash;                <div>&ndash;&gt;-->
            <!--              &lt;!&ndash;                  <a-input v-model="gooleCode" placeholder="请输入谷歌验证码" class="goole-input"/>&ndash;&gt;-->
            <!--              &lt;!&ndash;                  <span class="goole-input-text">亦称GA/TOTP码</span>&ndash;&gt;-->
            <!--              &lt;!&ndash;                </div>&ndash;&gt;-->
            <!--              &lt;!&ndash;                <div style="text-align: center">&ndash;&gt;-->
            <!--              &lt;!&ndash;                  <a-button class="sureBtn">确定</a-button>&ndash;&gt;-->
            <!--              &lt;!&ndash;                </div>&ndash;&gt;-->
            <!--              &lt;!&ndash;              </div>&ndash;&gt;-->
            <!--            </div>-->
          </div>
        </a-col>
      </a-row>
    </div>

  </div>
</template>

<script>
  import {
    getAccountDetail,
    addAccountAddress,
    getAccountAddresses,
    changeTradePassword,
    getUserInfo,
    getLockIncomes,
    sendEmailCode,
    yesterdayIncome,
    sendSmsCode,
    bindEmail,
    changeManyVerify,
    changePassword,
    updateAccountAddress,
    getAccountAddressDetail,
    googleAuthSecretKey,
    getRechargeAddress,
    verifiedCard,
    getFilInfo,
    getDealList,
    getOrderList,
    getEmailImage,
    getChangePwdImage,
    amountExchange,
    applyExtractCash,
    extractCashPage,
    sendBizEmailCode
  } from '../serves/index'
  import Clipboard from 'clipboard'
  import {
    eventBus
  } from '@/eventBus'
  import {
    getLocalStorage,
    setLocalStorage,
    removeLocalStorage
  } from "../serves/localStorage"
  import {
    columns1,
    columns2,
    columns3,
    columns5,
    columns6,
    columns7,
  } from './columns'

  export default {
    name: "PersonalCenter",
    data() {
      const validatorPassWord = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请二次输入新密码！'))
        } else if (value != this.form4.newPassword) {
          callback(new Error('两次输入的密码不一致，请重新输入！'))
        } else {
          callback()
        }
      }
      const validatorPassWord3 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请二次输入新密码！'))
        } else if (value != this.form3.newPassword) {
          callback(new Error('两次输入的密码不一致，请重新输入！'))
        } else {
          callback()
        }
      }
      const validateEmail = (rule, value, callback) => {
        let reg = /^([a-zA-Z\d])(\w|)+@[a-zA-Z\d]+\.[a-zA-Z]{2,4}$/;
        if (value === '') {
          callback(new Error('请邮箱号码！'))
        } else if (!reg.test(value)) {
          callback(new Error('邮箱格式错误，请重新输入！'))
        } else {
          callback()
        }
      }
      const validatePhone = (rule, value, callback) => {
        let reg = /^1[0-9]{10}$/;
        if (value === '') {
          callback(new Error('请输入手机号码！'))
        } else if (!reg.test(value)) {
          callback(new Error('手机号码错误，请重新输入！'))
        } else {
          callback()
        }
      }
      const validateCard = (rule, value, callback) => {
        let reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
        if (value === '') {
          callback(new Error('请输入身份证号码！'))
        } else if (!reg.test(value)) {
          callback(new Error('身份证号码错误，请重新输入！'))
        } else {
          callback()
        }
      }
      return {
        form6: {
          num: '',
          emailCode: ''
        },
        form7: {
          num: '',
          address: '',
          emailCode: ''
        },
        visible1: false,
        visible2: false,
        imgSrcEmail: '',
        imgSrcChange: '',
        reload: true,
        tabsList: {
          email: '个人中心 / 邮箱绑定',
          realName: '个人中心 / 实名认证',
          address: '个人中心 / USDT提现地址',
          google: '安全设置 / 谷歌验证'
        },
        tabName: '钱包管理 / 余额账户',
        checked: false,
        updateAdd: true,
        isOpen: true,
        token: '',
        emailForm: {
          email: '',
          imageCode: '',
          emailCode: ''
        },
        rulesEmail: {
          email: [{
            required: true,
            validator: validateEmail,
            trigger: 'change'
          }],
          imageCode: [{
            required: true,
            message: '图形验证码不能为空！',
            trigger: 'change'
          }],
          emailCode: [{
            required: true,
            message: '邮箱验证码不能为空！',
            trigger: 'change'
          }]
        },
        updateId: '',
        form2: {
          address: '',
          name: '',
          emailCode: ''
        },
        form3: {
          phone: '',
          imageCode: '',
          smsCode: '',
          oldPassword: '',
          newPassword: '',
          sureNewPassword: ''
        },
        sendText: '获取验证码',
        sendText1: '获取邮箱验证码',
        sendText2: '获取邮箱验证码',
        disabled: false,
        disabled1: false,
        disabled2: false,
        timer2: null,
        timer3: null,
        timer4: null,
        form4: {
          newPassword: '',
          surePassWord: '',
          googleCode: ''
        },
        form5: {
          realName: '',
          idCard: ''
        },
        columns1,
        data1: [],
        pagination: {
          current: 1,
          total: 0,
          pageSize: 20,
          showSizeChanger: true,
          showTotal: total => `共 ${total} 条`,
          pageSizeOptions: ['10', '20', '30', '40', '50'],
        },
        lastPageSize: 10,
        pagination1: {
          current: 1,
          total: 0,
          pageSize: 10,
          showSizeChanger: true,
          showTotal: total => `共 ${total} 条`,
          pageSizeOptions: ['10', '20', '30', '40', '50'],
        },
        lastPageSize1: 10,
        pagination2: {
          current: 1,
          total: 0,
          pageSize: 10,
          showSizeChanger: true,
          showTotal: total => `共 ${total} 条`,
          pageSizeOptions: ['10', '20', '30', '40', '50'],
        },
        lastPageSize2: 10,
        pagination3: {
          current: 1,
          total: 0,
          pageSize: 10,
          showSizeChanger: true,
          showTotal: total => `共 ${total} 条`,
          pageSizeOptions: ['10', '20', '30', '40', '50'],
        },
        lastPageSize3: 10,
        columns2,
        data2: [],
        columns3,
        data3: [],
        columns5,
        data5: [],
        columns6,
        data6: [],
        columns7,
        data7: [],
        visible: false,
        gooleCode: '',
        starRiverKey: '',
        rules: {
          newPassword: [{
            required: true,
            message: '新密码不能为空',
            trigger: 'change'
          }],
          surePassWord: [{
            required: true,
            validator: validatorPassWord,
            trigger: 'change'
          }],
          googleCode: [{
            required: true,
            message: '谷歌验证码不能为空！',
            trigger: 'change'
          }]
        },
        rules3: {
          phone: [{
            required: true,
            validator: validatePhone,
            trigger: 'change'
          }],
          imageCode: [{
            required: true,
            message: '图形验证码不能为空！',
            trigger: 'change'
          }],
          smsCode: [{
            required: true,
            message: '短信验证码不能为空！',
            trigger: 'change'
          }],
          oldPassword: [{
            required: true,
            message: '请输入旧密码！',
            trigger: 'change'
          }],
          newPassword: [{
            required: true,
            message: '请输入新密码！',
            trigger: 'change'
          }],
          sureNewPassword: [{
            required: true,
            validator: validatorPassWord3,
            trigger: 'change'
          }]
        },
        rules5: {
          realName: [{
            required: true,
            message: '姓名不能为空！',
            trigger: 'change'
          }],
          idCard: [{
            required: true,
            validator: validateCard,
            trigger: 'change'
          }]
        },

        previewVisible: false,
        previewImage: '',
        fileList: [],
        nickName: '',
        phone: '',

        personInfoData: {},
        yesterdayEarn: '',
        currentPrice: '', // 当前价格
        timer: null,
        loading: false,
        showEmail: false,
        remarkStatus: '',
        remark: '',
        currentBindEmail: ''
      }
    },
    created() {
      this.token = `Bearer ${getLocalStorage('accessToken')}`
    },
    beforeDestroy() {
      clearTimeout(this.timer)
    },
    mounted() {
      if (this.$route.query.tabName) {
        this.tabName = this.tabsList[this.$route.query.tabName]
      }
      this.getAccountData()
      this.getEarningIncome()
      this.getUserInfo()
      this.getAccAddresses()
      this.getLockCount()
      this.getGoogleKey()
      this.getCurrentPrice()
      this.getDealListData()
      this.getOrderListData()
      this.getEmailImageCode()
      this.getChangePwdImageCode()
      this.getTiXian()
    },
    methods: {
      // 提现记录
      pageChange3(val) {
        this.pagination3.pageSize = val.pageSize
        if (val.pageSize != this.lastPageSize3) {
          this.pagination3.current = 1
          this.lastPageSize3 = val.pageSize
        } else {
          this.pagination3.current = val.current
        }
        this.getTiXian()
      },
      getTiXian() {
        let params = {
          pageNum: this.pagination3.current,
          pageSize: this.pagination3.pageSize
        }
        extractCashPage(params).then(res => {
          if (res.status == 200 && res.data.status.code == 200) {
            this.data7 = res.data.data.records
            this.pagination3.total = res.data.data.total
          } else if (res.data.status.code == 450) {
            this.$message.warning(res.data.message)
            this.$router.push({
              path: '/login'
            })
          } else {
            this.$message.warning(res.data.message)
          }
        })
      },
      // 兑换
      submitDuiH() {
        if (this.form6.num > this.personInfoData.total) {
          this.$message.warning('兑换数大于余额')
          return false
        }
        let params = {
          amount: this.form6.num,
          emailCode: this.form6.emailCode
        }
        amountExchange(params).then(res => {
          if (res.status == 200 && res.data.status.code == 200) {
            this.$message.success('兑换成功！')
            this.visible1 = false
            this.getAccountData()
          } else if (res.data.status.code == 450) {
            this.$message.warning(res.data.message)
            this.$router.push('login')
          } else {
            this.$message.warning(res.data.message)
          }
        })
      },
      // 提现
      submitTiX() {
        if (this.personInfoData.usdt < this.form7.num) {
          this.$message.warning('提现金额超出余额，请修改！');
          return false;
        }
        let params = {
          amount: this.form7.num,
          addressId: this.form7.address,
          emailCode: this.form7.emailCode
        }
        applyExtractCash(params).then(res => {
          if (res.status == 200 && res.data.status.code == 200) {
            this.$message.success('提现成功！')
            this.visible2 = false
            this.getAccountData()
          } else if (res.data.status.code == 450) {
            this.$message.warning(res.data.message)
            this.$router.push('login')
          } else {
            this.$message.warning(res.data.message)
          }
        })
      },
      // 获取图形验证码
      getEmailImageCode() {
        getEmailImage().then(res => {
          if (res.status == 200 && res.data.status.code == 200) {
            this.imgSrcEmail = res.data.data
          } else {
            this.$message.warning(res.data.message)
          }
        })
      },
      getChangePwdImageCode() {
        getChangePwdImage().then(res => {
          if (res.status == 200 && res.data.status.code == 200) {
            this.imgSrcChange = res.data.data
          } else {
            this.$message.warning(res.data.message)
          }
        })
      },
      refelshEmailImg() {
        this.getEmailImageCode()
      },
      refelshChangeImg() {
        this.getChangePwdImageCode()
      },
      // 获取交易记录
      getDealListData() {
        let params = {
          pageNum: this.pagination1.current,
          pageSize: this.pagination1.pageSize
        }
        getDealList(params).then(res => {
          if (res.status == 200 && res.data.status.code == 200) {
            this.data5 = res.data.data.records
            this.pagination1.total = res.data.data.total
            this.data5.forEach((item) => {
              if ([4, 7, 11].indexOf(item.refType) > -1) {
                item['before'] = item.beforeCard + 'T';
                item['after'] = item.afterCard + 'T';
              } else if ([20, 21].indexOf(item.refType) > -1) {
                if (item.refType === 20 && item.type === 1) {
                  item['before'] = item.beforeLock + 'U';
                  item['after'] = item.afterLock + 'U';
                } else {
                  item['before'] = item.beforeFreeze + 'U';
                  item['after'] = item.afterFreeze + 'U';
                }
              } else if ([5, 6, 9, 12, 22].indexOf(item.refType) > -1) {
                if (item.refType === 22 && item.type === 2) {
                  item['before'] = item.beforeLock + 'U';
                  item['after'] = item.afterLock + 'U';
                } else {
                  item['before'] = item.beforeUsdt + 'U';
                  item['after'] = item.afterUsdt + 'U';
                }
              } else {
                item['before'] = item.beforeFil + 'F';
                item['after'] = item.afterFil + 'F';
              }
              if (item.type === 1) {
                item.amount = '+' + item.amount
              } else {
                item.amount = '-' + item.amount
              }
            });
          } else {
            this.$message.warning(res.data.message)
          }
        })
      },
      pageChange1(val) {
        this.pagination1.pageSize = val.pageSize
        if (val.pageSize != this.lastPageSize1) {
          this.pagination1.current = 1
          this.lastPageSize1 = val.pageSize
        } else {
          this.pagination1.current = val.current
        }
        this.getDealListData()
      },
      // 获取订单记录
      getOrderListData() {
        let params = {
          pageNum: this.pagination2.current,
          pageSize: this.pagination2.pageSize
        }
        getOrderList(params).then(res => {
          if (res.status == 200 && res.data.status.code == 200) {
            this.data6 = res.data.data.records
            this.pagination2.total = res.data.data.total
          } else {
            this.$message.warning(res.data.message)
          }
        })
      },
      pageChange2(val) {
        this.pagination2.pageSize = val.pageSize
        if (val.pageSize != this.lastPageSize2) {
          this.pagination2.current = 1
          this.lastPageSize2 = val.pageSize
        } else {
          this.pagination2.current = val.current
        }
        this.getOrderListData()
      },
      // 获取当前价格
      getCurrentPrice() {
        getFilInfo().then(res => {
          if (res.status == 200 && res.data.code == 200) {
            this.currentPrice = res.data.data.newlyPrice
          }
        })
        this.timer = setTimeout(() => {
          this.getCurrentPrice()
        }, 1000 * 60)
      },
      verifiedIdCard(formName) {
        this.$refs[formName].validate(valid => {
          if (valid) {
            let cardImages = []
            this.fileList.forEach(el => {
              cardImages.push(el.response.data)
            })
            if (cardImages.length != 2) {
              this.$message.warning('请上传身份证正反面')
              return false
            }
            let params = {
              realName: this.form5.realName,
              idCard: this.form5.idCard,
              idCardImages: cardImages.join(',')
            }
            verifiedCard(params).then(res => {
              if (res.status == 200 && res.data.status.code == 200) {
                this.$message.success('提交成功！')
                this.fileList = []
              } else {
                this.$message.warning(res.data.message)
              }
            })
          }
        })
      },
      // 上传
      getBase64(file) {
        return new Promise((resolve, reject) => {
          const reader = new FileReader();
          reader.readAsDataURL(file);
          reader.onload = () => resolve(reader.result);
          reader.onerror = error => reject(error);
        });
      },
      handleCancel() {
        this.previewVisible = false;
      },
      async handlePreview(file) {
        if (!file.url && !file.preview) {
          file.preview = await this.getBase64(file.originFileObj);
        }
        this.previewImage = file.url || file.preview;
        this.previewVisible = true;
      },
      handleChange(val) {
        if (val.file.status === 'done') {
          this.$message.success('上传成功！')
        }
        this.fileList = val.fileList;
      },
      // 充值
      rechargeMoney() {
        this.loading = true
        getRechargeAddress().then(res => {
          if (res.status == 200 && res.data.status.code == 200) {
            window.open(res.data.data, '_self')
            this.loading = false
          } else if (res.data.status.code == 450) {
            this.$message.warning(res.data.message)
            this.$router.push({
              path: '/login'
            })
            eventBus.$emit('isShow', false);
          } else {
            this.$message.warning(res.data.message)
          }
        })
      },
      // 获取谷歌密钥
      getGoogleKey() {
        googleAuthSecretKey().then(res => {
          if (res.status == 200 && res.data.status.code == 200) {
            this.starRiverKey = res.data.message
          } else if (res.data.status.code == 450) {
            this.$message.warning(res.data.message)
            this.$router.push({
              path: '/login'
            })
            eventBus.$emit('isShow', false);
          } else {
            this.$message.warning(res.data.message)
          }
        })
      },
      // 绑定邮箱
      sendEmail() {
        if (!this.emailForm.email) {
          this.$message.warning('请输入电子邮箱！')
          return
        }
        this.sendText1 = `60s后重新发送`
        this.disabled1 = true
        this.setTime1(60)
        let params = {
          data: this.emailForm.email
        }
        sendEmailCode(params).then(res => {
          if (res.status == 200 && res.data.status.code == 200) {
            this.$message.success('发送成功！')
          } else {
            this.$message.warning(res.data.message)
          }
        })
      },
      // 获取邮箱验证码
      sendEmail1(val) {
        if (!this.currentBindEmail) {
          this.$message.warning('邮箱未绑定，请先绑定！')
          return
        }

        if (val === 'exchangeAmount' && !this.form6.num) {
          this.$message.warning('请输入有效数量！')
          return
        }

        if (val === 'applyExtractCash' && !this.form7.address) {
          this.$message.warning('请选择提现地址！')
          return
        }

        if (val === 'applyExtractCash' && !this.form7.num) {
          this.$message.warning('请输入有效数量！')
          return
        }

        if (val === 'accountAddressAdd' && !this.form2.address) {
          this.$message.warning('请输入提现地址！')
          return
        }

        if (val === 'accountAddressAdd' && !this.form2.name) {
          this.$message.warning('请输入地址名称！')
          return
        }
        this.sendText1 = `60s后重新发送`
        this.disabled2 = true
        this.setTime2(60)
        let params = {
          data: val
        }
        sendBizEmailCode(params).then(res => {
          if (res.status == 200 && res.data.status.code == 200) {
            this.$message.success('发送成功！')
          } else {
            this.$message.warning(res.data.message)
          }
        })
      },
      bindEmailCode(formName) {
        this.$refs[formName].validate(valid => {
          if (valid) {
            let params = {
              email: this.emailForm.email,
              imageCode: this.emailForm.imageCode,
              emailCode: this.emailForm.emailCode,
            }
            bindEmail(params).then(res => {
              if (res.status == 200 && res.data.status.code == 200) {
                this.$message.success("绑定成功！")
                this.visible = false
                this.showEmail = true
                this.currentBindEmail = this.emailForm.email
              } else if (res.data.status.code == 450) {
                this.$message.warning(res.data.message)
                this.$router.push({
                  path: '/login'
                })
                eventBus.$emit('isShow', false);
              } else {
                this.$message.warning(res.data.message)
              }
            })
          }
        })
      },
      getLockCount() {
        let params = {
          pageNum: 1,
          pageSize: 10
        }
        getLockIncomes(params).then(res => {
          if (res.status == 200 && res.data.status.code == 200) {
            this.data3 = res.data.records
          } else if (res.data.status.code == 450) {
            this.$message.warning(res.data.message)
            this.$router.push({
              path: '/login'
            })
            eventBus.$emit('isShow', false);
          } else {
            this.$message.warning(res.data.message)
          }
        })
      },
      // 开启关闭二次验证
      openCheck() {
        let params = {
          googleCode: this.gooleCode,
          status: this.checked ? 1 : 0,
        }
        changeManyVerify(params).then(res => {
          if (res.status == 200 && res.data.status.code == 200) {
            this.isOpen = this.checked
            this.$message.success(`${this.checked ? '已开启' : '已关闭'}`)
            this.gooleCode = ''
          } else if (res.data.status.code == 450) {
            this.$message.warning(res.data.message)
            this.$router.push({
              path: '/login'
            })
            eventBus.$emit('isShow', false);
          } else {
            this.$message.warning(res.data.message)
          }
        })
      },
      pageChange(val) {
        this.pagination.pageSize = val.pageSize
        if (val.pageSize != this.lastPageSize) {
          this.pagination.current = 1
          this.lastPageSize = val.pageSize
        } else {
          this.pagination.current = val.current
        }
        this.getAccAddresses()
      },
      // 添加提现地址
      handleOk() {
        this.visible = false
        if (this.updateAdd) {
          addAccountAddress(this.form2).then(res => {
            if (res.status == 200 && res.data.status.code == 200) {
              this.$message.success('添加成功！')
              this.getAccAddresses()
              for (let k in this.form2) {
                this.form2[k] = ''
              }
            } else if (res.data.status.code == 450) {
              this.$message.warning(res.data.message)
              this.$router.push({
                path: '/login'
              })
              eventBus.$emit('isShow', false);
            } else {
              this.$message.warning(res.data.message)
            }
          })
        } else {
          let params = {
            address: this.form2.address,
            name: this.form2.name,
            tradePassword: this.form2.tradePassword,
            id: this.updateId,
          }
          updateAccountAddress(params).then(res => {
            if (res.status == 200 && res.data.status.code == 200) {
              this.$message.success('修改成功！')
              this.updateAdd = true
              this.getAccAddresses()
              for (let k in this.form2) {
                this.form2[k] = ''
              }
            } else if (res.data.status.code == 450) {
              this.$message.warning(res.data.message)
              this.$router.push({
                path: '/login'
              })
              eventBus.$emit('isShow', false);
            } else {
              this.$message.warning(res.data.message)
            }
          })
        }
      },
      // 获取提现地址列表
      getAccAddresses() {
        let params = {
          pageNum: this.pagination.current,
          pageSize: this.pagination.pageSize
        }
        getAccountAddresses(params).then(res => {
          if (res.status == 200 && res.data.status.code == 200) {
            this.data1 = res.data.data.records
            this.pagination.total = res.data.data.total
          } else if (res.data.status.code == 450) {
            this.$message.warning(res.data.message)
            this.$router.push({
              path: '/login'
            })
            eventBus.$emit('isShow', false);
          } else {
            this.$message.warning(res.data.message)
          }
        })
      },
      // 更新提现地址
      updateAddress(val) {
        this.updateAdd = false
        this.visible = true
        this.form2.address = val.address
        this.form2.name = val.name
        this.updateId = val.id
        this.sendText2 = '获取邮箱验证码'
        this.disabled2 = false
      },
      // 地址详情
      getDetail(val) {
        let params = {
          id: val.id
        }
        getAccountAddressDetail(params).then(res => {
          if (res.status == 200 && res.data.status.code == 200) {
            this.data4 = [res.data.data]
          } else if (res.data.status.code == 450) {
            this.$message.warning(res.data.message)
            this.$router.push({
              path: '/login'
            })
            eventBus.$emit('isShow', false);
          } else {
            this.$message.warning(res.data.message)
          }
        })
      },
      // 获取登录用户信息
      getUserInfo() {
        getUserInfo().then(res => {
          if (res.status == 200 && res.data.status.code == 200) {
            let result = res.data.data
            this.isOpen = result.enableManyVerify
            this.nickName = result.phone ? result.phone.substring(result.phone.length - 4) : result.email.substring(0, 4)
            this.phone = result.phone
            this.currentBindEmail = result.email
            this.showEmail = result.email ? true : false
            this.remark = result.remark
            if (result.realNameVerificationStatus == 3) {
              this.remarkStatus = '您已完成实名认证！'
            } else if (result.realNameVerificationStatus == 2) {
              this.remarkStatus = '认证失败，请重新认证！'
            } else if (result.realNameVerificationStatus == 1) {
              this.remarkStatus = '待认证！'
            } else {
              this.remarkStatus = '用户未提交认证！'
            }
            setLocalStorage('nickName', this.nickName)
            eventBus.$emit('nickName', this.nickName);
          } else if (res.data.status.code == 450) {
            this.$message.warning(res.data.message)
            this.$router.push({
              path: '/login'
            })
            eventBus.$emit('isShow', false);
          } else {
            this.$message.warning(res.data.message)
          }
        })
      },
      // 修改登录密码
      changePassWord(formName) {
        this.$refs[formName].validate(valid => {
          if (valid) {
            let params = {
              phone: this.form3.phone,
              oldPassword: this.form3.oldPassword,
              smsCode: this.form3.smsCode,
              imageCode: this.form3.imageCode,
              newPassword: this.form3.newPassword,
            }
            changePassword(params).then(res => {
              if (res.status == 200 && res.data.status.code == 200) {
                this.$message.success('修改成功，请重新登录！')
              } else if (res.data.status.code == 450) {
                this.$message.warning(res.data.message)
                this.$router.push({
                  path: '/login'
                })
                eventBus.$emit('isShow', false);
              } else {
                this.$message.warning(res.data.message)
              }
            })
          }
        })
      },
      // 修改交易密码
      changeDealWord(formName) {
        this.$refs[formName].validate(valid => {
          if (valid) {
            let params = {
              newPassword: this.form4.newPassword,
              googleCode: this.form4.googleCode
            }
            changeTradePassword(params).then(res => {
              if (res.status == 200 && res.data.status.code == 200) {
                this.$message.success('修改成功！')
              } else if (res.data.status.code == 450) {
                this.$message.warning(res.data.message)
                this.$router.push({
                  path: '/login'
                })
                eventBus.$emit('isShow', false);
              } else {
                this.$message.warning(res.data.message)
              }
            })
          }
        })
      },
      getAccountData() {
        getAccountDetail().then(res => {
          if (res.status == 200 && res.data.status.code == 200) {
            this.personInfoData = res.data.data
            this.data2 = [res.data.data]
          } else if (res.data.status.code == 450) {
            this.$message.warning(res.data.message)
            this.$router.push({
              path: '/login'
            })
            eventBus.$emit('isShow', false);
          } else {
            this.$message.warning(res.data.message)
          }
        })
      },
      getEarningIncome() {
        yesterdayIncome().then(res => {
          if (res.status == 200 && res.data.status.code == 200) {
            this.yesterdayEarn = res.data.data
          } else if (res.data.status.code == 450) {
            this.$message.warning(res.data.message)
            this.$router.push({
              path: '/login'
            })
            eventBus.$emit('isShow', false);
          } else {
            this.$message.warning(res.data.message)
          }
        })
      },
      setTime2(num) {
        if (num <= 1) {
          this.sendText2 = `重新发送`
          this.disabled2 = false
          clearTimeout(this.timer4)
          return false
        } else {
          this.disabled2 = true
          num--
        }
        this.sendText2 = `${num}s后重新发送`
        this.timer4 = setTimeout(() => {
          this.setTime2(num)
        }, 1000)
      },
      setTime1(num) {
        if (num <= 1) {
          this.sendText1 = `重新发送`
          this.disabled1 = false
          clearTimeout(this.timer3)
          return false
        } else {
          this.disabled1 = true
          num--
        }
        this.sendText1 = `${num}s后重新发送`
        this.timer3 = setTimeout(() => {
          this.setTime1(num)
        }, 1000)
      },
      setTime(num) {
        if (num <= 1) {
          this.sendText = `重新发送`
          this.disabled = false
          clearTimeout(this.timer2)
          return false
        } else {
          this.disabled = true
          num--
        }
        this.sendText = `${num}s后重新发送`
        this.timer2 = setTimeout(() => {
          this.setTime(num)
        }, 1000)
      },
      getMessageNum() {
        if (!this.form3.phone) {
          this.$message.warning('手机号不能为空！')
          return
        }
        this.sendText = `60s后重新发送`
        this.disabled = true
        this.setTime(60)
        let params = {
          data: this.form3.phone
        }
        sendSmsCode(params).then(res => {
          if (res.status == 200 && res.data.status.code == 200) {
            this.$message.success('发送成功！')
          } else {
            this.$message.warning(res.data.message)
          }
        })
      },
      copyStarRiver() {
        let clipboard = new Clipboard('.copyCode')
        clipboard.on('success', e => {
          this.$message.success("复制成功！")
          // 释放内存
          clipboard.destroy()
        })
        clipboard.on('error', e => {
          // 不支持复制
          this.$message.warning("电脑或手机不支持复制！")
          // 释放内存
          clipboard.destroy()
        })
      },
      rowKey(record, index) {
        return index
      }
    }
  }
</script>

<style lang="scss">
  .personCenter {
    .personInfo {
      text-align: left;
      color: #fff;
      height: 400px;
      background: linear-gradient(to bottom, #4005C6 0%, #1E0294 100%);
      padding: 50px 200px;

      .add {
        border-radius: 20px;
        margin-left: 10px;
        color: #fff;
        background: linear-gradient(to right, #C6B4FF 0%, #3404F4 100%);
        border: none;
        // position: absolute;
        // left: 200px;
        // top: -45px;
      }

      p:nth-child(1) {
        font-size: 30px;
        font-weight: 700;
      }

      p:nth-child(2) {
        padding: 20px 0px 50px;
        font-weight: 700;

        span {
          margin-right: 20px;
        }
      }

      .account1 {
        display: none;
      }

      .account {
        display: flex;
        justify-content: space-between;

        .accountNum {
          font-size: 28px;
        }
      }
    }

    .personShow {
      padding: 50px 200px;
      text-align: center;

      .left {
        box-shadow: 0px 5px 20px 0px rgba(56, 12, 244, 0.08);
        font-size: 18px;
        padding: 30px 0px;

        .menuTitle {
          color: #380CF4;
          font-weight: 700;
          margin-top: 10px;
        }

        p {
          cursor: pointer;
          padding: 10px 0px;
          margin: 0px;
        }

        .selectP {
          background-color: #EBE6FD;
        }

        .borderLine {
          height: 2px;
          background: linear-gradient(to right, #ffffff 0%, #ffffff 30%, #380CF4 50%, #ffffff 70%, #ffffff 100%);
          margin-bottom: 40px;
        }
      }

      .right {
        box-shadow: 0px 5px 20px 0px rgba(56, 12, 244, 0.08);
        padding: 30px;
        text-align: left;

        .title {
          font-size: 18px;
          margin-top: 10px;
        }

        .ant-form {
          .ant-form-item-label {
            text-align: center;
          }

          .modify {
            border-radius: 20px;
            margin-left: 10px;
            color: #fff;
            background: linear-gradient(to right, #C6B4FF 0%, #3404F4 100%);
          }
        }

        .ant-form label {
          font-size: 16px;
        }

        .add {
          border-radius: 20px;
          margin-left: 10px;
          color: #fff;
          background: linear-gradient(to right, #C6B4FF 0%, #3404F4 100%);
          position: absolute;
          left: 200px;
          top: -45px;
        }

        .ant-modal-mask {
          background-color: rgba(0, 0, 0, 0.7);
        }

        .ant-modal-footer {
          text-align: center;
        }

        .tabTitle {
          font-size: 16px;

          div {
            height: 2px;
            background: linear-gradient(to right, #ffffff 0%, #ccc 50%, #ffffff 100%);
            margin-bottom: 15px;
          }

          p:nth-child(3) {
            font-weight: 700;
            color: #380CF4;
          }
        }

        .sureBtn {
          background: linear-gradient(to right, #C6B4FF 0%, #3404F4 100%);
          color: #fff;
          font-size: 18px;
          width: 180px;
          border-radius: 20px;
        }

        .goole-input {
          width: 300px;
        }

        .goole-input-text {
          margin-left: 20px;
        }

        .erwei {
          display: flex;
          align-items: center
        }

        .starRiverKey {
          width: 300px;
        }

        .authentication {
          padding: 0px 60px;

          .sureBtn {
            margin-top: 20px;
          }
        }
      }
    }
  }

  @media screen and (max-width: 800px) {
    .personCenter {
      .personInfo {
        height: auto;
        padding: 10px;

        p:nth-child(1) {
          font-size: 24px;
          font-weight: 700;
          margin-bottom: 15px;
        }

        p:nth-child(2) {
          font-weight: 700;
          padding: 10px 0px;

          span {
            margin-right: 5px;
          }
        }

        .account {
          display: none;
        }

        .account1 {
          display: block;

          .account2 {
            display: flex;
            justify-content: space-between;

            .accountNum {
              font-size: 16px;
            }
          }
        }
      }

      .personShow {
        padding: 10px;
        text-align: center;

        .ant-col-6 {
          padding-right: 5px !important;
        }

        .ant-col-18 {
          padding-left: 5px !important;
        }

        .left {
          font-size: 12px;
          padding: 20px 0px;

          p {
            cursor: pointer;
            padding: 10px 0px;
            margin: 0px;
          }


          .borderLine {
            margin-bottom: 20px;
          }
        }

        .right {
          box-shadow: 0px 5px 20px 0px rgba(56, 12, 244, 0.08);
          padding: 10px;
          text-align: left;

          .title {
            font-size: 12px;
            margin-top: 10px;
          }

          .ant-form {
            .ant-form-item-label {
              text-align: center;
              width: auto;
            }

            .modify {
              border-radius: 20px;
              margin-left: 10px;
              color: #fff;
              background: linear-gradient(to right, #C6B4FF 0%, #3404F4 100%);
            }
          }

          .ant-form label {
            font-size: 14px;
          }

          .add {
            border-radius: 20px;
            margin-left: 10px;
            color: #fff;
            background: linear-gradient(to right, #C6B4FF 0%, #3404F4 100%);
            position: absolute;
            left: 180px;
            top: -35px;
          }

          .ant-table-thead > tr > th,
          .ant-table-tbody > tr > td {
            padding: 10px;
          }

          .ant-col-offset-4 {
            margin-left: 0px;
          }

          .ant-modal-mask {
            background-color: rgba(0, 0, 0, 0.7);
          }

          .ant-modal-footer {
            text-align: center;
          }

          .tabTitle {
            font-size: 14px;

            div {
              height: 2px;
              background: linear-gradient(to right, #ffffff 0%, #ccc 50%, #ffffff 100%);
              margin-bottom: 15px;
            }

            p:nth-child(3) {
              font-weight: 700;
              color: #380CF4;
            }
          }

          .sureBtn {
            background: linear-gradient(to right, #C6B4FF 0%, #3404F4 100%);
            color: #fff;
            font-size: 16px;
            width: 180px;
            border-radius: 20px;
          }

          .goole-input {
            width: 200px;
          }

          .goole-input-text {
            display: block;
            margin-left: 10px;
            text-align: right;
            padding: 10px 0px;
          }

          .erwei {
            display: block;
          }

          .starRiverKey {
            width: auto;
          }

          .authentication {
            padding: 0px 10px;
          }
        }
      }
    }
  }
</style>
